<template>
  <div>
    <Scroll id="righttop" :cdata="cdata" />
    <!-- <Chart :cdata="cdata" /> -->
  </div>
</template>

<script>
// import Chart from './chart.vue';
import Scroll from './chart.vue';
export default {
  data () {
    return {
      cdata: {
        xData: ['列1', '列2', '列3'],
        yData: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
      },
      // websocket 获得的数据
      storeDatas: null,
      // 存储的次数
      count: 0
    }
  },
  components: {
    // Chart,
    Scroll
  },
  mounted () {
  // 注册监听事件
  window.addEventListener('onmessageWS', this.getsocketData)
  },
  methods: {
    // // 接收消息
    // getsocketData(e){
    //   const data = e && e.detail.data     // 接收的数据
    //   this.storeDatas = JSON.parse(data)  // JSON转化为对象格式

    //   console.log(data, 3)
    //   let timeData = this.storeDatas.values[0].time.split(' ')[1]  // 时间
    //   let valueData = this.storeDatas.values[0].value.toFixed(2)   // 数字
    //   console.log(timeData, valueData);

    //   // 存入数组
    //   if(this.count >= 7) {
    //     this.cdata.xData.shift()  // 去头
    //     this.cdata.yData.shift()  // 去头
    //   }
    //     this.cdata.xData.push(timeData)  // 数据塞入x轴
    //     this.cdata.yData.push(valueData)  // 数据塞入x轴
    //     this.count++
    // }
  },
  destroyed() {
  // 在需要的时候卸载监听事件，比如离开页面
  window.removeEventListener('onmessageWS', this.getsocketData)
  }
}
</script>

<style lang="scss" scoped>
#righttop {
  width: 10.1875rem;
  height: 4.55rem;
}
</style>